<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>蓝源Eloan-P2P平台->用户注册</title>
<link rel="stylesheet" href="/js/bootstrap-3.3.2-dist/css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="/css/core.css" type="text/css" />
<script type="text/javascript" src="/js/jquery/jquery-2.1.3.js"></script>
<script type="text/javascript" src="/js/bootstrap-3.3.2-dist/js/bootstrap.js"></script>
<script type="text/javascript" src="/js/plugins/jquery-validation/jquery.validate.js"></script>
<script type="text/javascript" src="/js/plugins/jquery.form.js"></script>
<script type="text/javascript" src="/js/jquery.bootstrap.min.js"></script>

<style type="text/css">
	.el-register-form{
		width:600px;
		margin-left:auto;
		margin-right:auto;
		margin-top: 20px;
	}
	.el-register-form .form-control{
		width: 220px;
		display: inline;
	}
	input[name='verifycode'] + label{
		position: absolute;
		top: 7px;
		left:220px;
	}
</style>
<script type="text/javascript">
	$(function(){

	    //定义手机号码验证的方法
		function checkPhone(phoneNumber) {
            return /^0{0,1}(13[0-9]|145|147|15[0-3]|15[5-9]|180|18[5-9])[0-9]{8}$/.test(phoneNumber);
        }

	    //自定义手机号码验证
        $.validator.addMethod("phoneNumber", function(value, element) {
            var length = value.length;
            //正则表达式
            var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
            return this.optional(element) || (length == 11 && mobile.test(value));
        }, "手机号码格式错误");

        //发送请求验证
		$("#registerForm").validate({
            submitHandler: function (form) {
                //发送ajax请求
                $(form).ajaxSubmit({
                    type:"post",
                    dataType:'json',
					success: function (result) {
                        if(result.success){
						    jQuery.messager.confirm("温馨提示","注册成功",function () {
						        //跳转到登陆界面
								location.href = "/login.html"
                            })
						}else {
                            $.messager.alert("提示",result.msg);
						}
                    }
				})
            },
			errorClass: "text-danger",
            rules:{
			  	username:{
                  number:true,
                  required: true,
                  minlength: 11,
				  phoneNumber: true,
                  remote: {
                        type: 'post',
                        url: '/validateUsername',
                        dataType:"json",
                        data: {
                            username: function () {
                                return $("#phoneNumber").val();
                            }
                        }
                  },
			  },
                verifycode:{
			      required: true
			  },
				password: {
                    required: true,
                    rangelength: [4,16]
			  },
                confirmPwd: {
                    required: true,
                    equalTo: "#password"
			  }
			},
			highlight: function (element,errorClass) {
				$(element).closest(".form-group").removeClass("has-success").addClass("has-error")
            },
            unhighlight:function (element,errorClass) {
                $(element).closest(".form-group").removeClass("has-error").addClass("has-success")
            },
            messages:{
                username:{
                    number: "手机号码必须是数字",
                    required: "用户名不能为空",
                    minlength: '手机号码长度是{0}位',
                    phoneNumber: "请正确填写您的手机号码",
                    remote: "该手机号码已经被注册!"
                },
                verifycode:{
                    required: "验证码不能为空"
                },
                password: {
                    required: "密码不能为空",
                    rangelength: '密码长度{0}~{1}位'
                },
                confirmPwd: {
                    required: "确认密码不能为空",
                    equalTo: "确认密码与密码必须一致"
                }
            }
		})
        /*发送手机验证码按钮*/
        $("#sendVerifyCode").click(function () {
            var phoneNumber = $("#phoneNumber").val();
            if(!checkPhone(phoneNumber)){
                $.messager.popup("手机号码格式不正确");
                return;
            }
            //点击按钮 就禁用按钮的属性
			var thisObj = $(this);
            thisObj.attr("disabled",true);

            //发送ajax请求
			$.ajax({
				url: "/sendVerifyCode",
				dataType: "json",
				//发送参数
				data: {phoneNumber: phoneNumber},
				success: function (result) {
					if(result.success){
                        $.messager.popup(result.msg)
						//如果成功 设置秒数初始值为90s
						var num = 90;
						//设置每过一秒就触发一次
						var timer = window.setInterval(function () {
							num--;
							//判断num 有没有大于0 如果大于0 改变按钮上的字体
							if(num > 0){
							    thisObj.text(num + "秒后重新发送")
							}else {
							    //按钮重新激活 并且字体变回原来的样子
                                thisObj.attr("disabled",false);
                                thisObj.text("发送验证码");
							}
                        },1000);

					}
                }
			})
        });
		//发送验证码结束
	})
</script>
</head>
<body>
	<!-- 网页头信息 -->
	<div class="el-header" >
		<div class="container" style="position: relative;">
			<ul class="nav navbar-nav navbar-right">
				<li><a href="/">首页</a></li>
				<li><a href="/login.html">登录</a></li>
				<li><a href="#">帮助</a></li>
			</ul>
		</div>
	</div>

	<!-- 网页导航 -->
	<div class="navbar navbar-default el-navbar">
		<div class="container">
			<div class="navbar-header">
				<a href=""><img alt="Brand" src="/images/logo.png"></a>
				<span class="el-page-title">用户注册</span>
			</div>
		</div>
	</div>

	<!-- 网页内容 -->
	<div class="container">
		<form id="registerForm" class="form-horizontal el-register-form"  action="/userRegister" method="post" >
			<p class="h4" style="margin: 10px 10px 20px;color:#999;">请填写注册信息，点击“提交注册”即可完成注册！</p>
			<div class="form-group">
				<label class="control-label col-sm-2">手机号码</label>
				<div class="col-sm-10">
					<input type="text" placeholder="手机号码" autocomplete="off" name="username" class="form-control" id="phoneNumber"/>
					<p class="help-block">请使用输入正确的手机号码</p>
				</div>
			</div>
			<div class="form-group">
				<label class="control-label col-sm-2">手机验证码</label>
				<div class="col-sm-10">
					<input type="text" placeholder="手机验证码" style="width: 100px" autocomplete="off" name="verifycode" class="form-control" id="verifycode"/>
					<button type="button" class="btn btn-success" id="sendVerifyCode">
						发送验证码
					</button>
					<p class="help-block">输入正确的短信验证码</p>
				</div>
			</div>
			<div class="form-group">
				<label class="control-label col-sm-2">密&emsp;码</label>
				<div class="col-sm-10">
					<input type="password" placeholder="密码" autocomplete="off" name="password" id="password" class="form-control" />
					<p class="help-block">密码为4~16位字符组成,采用数字、字母、符号安全性更高</p>
				</div>
			</div>
			<div class="form-group">
				<label class="control-label col-sm-2">确认密码</label>
				<div class="col-sm-10">
					<input type="password" placeholder="确认密码" autocomplete="off" name="confirmPwd" class="form-control" />
					<p class="help-block">请再次填写密码</p>
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2">
					<button type="submit" class="btn btn-success">
						同意协议并注册
					</button>
					&emsp;&emsp;
					<a href="/login.html" class="text-primary">已有账号，马上登录</a>

					<p style="padding-left: 50px;margin-top: 15px;">
						<a href="#">《使用协议说明书》</a>
					</p>
				</div>
			</div>
		</form>
	</div>
	<!-- 网页版权 -->
	<div class="container-foot-2">
		<div class="context">
			<div class="left">
				<p>专注于高级Java开发工程师的培养</p>
				<p>版权所有：&emsp;2017广州狼码教育科技有限公司</p>
				<p>地&emsp;&emsp;址：&emsp;广州市天河区棠下涌东路大地商务港D座603室</p>
				<p>电&emsp;&emsp;话： 020-2900xxxx&emsp;&emsp;
					邮箱：&emsp;service@wolfcode.cn</p>
				<p>
					<a href="http://www.miitbeian.gov.cn" style="color: #ffffff">ICP备案
						：粤ICP备字17147191号-1</a>
				</p>
				<p>
					<a href="http://www.gzjd.gov.cn/wlaqjc/open/validateSite.do" style="color: #ffffff">穗公网安备：44010650010086</a>
				</p>
			</div>
			<div class="right">
				<a target="_blank" href="http://weibo.com/wolfcode"><img
					src="/images/sina.png"></a>
			</div>
			<div class="clearfix"></div>
		</div>
	</div>
</body>
</html>